<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/js-test.js"></script>
</head>
<body>

<!-- The border="1" would normally make it a data table, but this won't
     be because of the ARIA roles on the tbody and rows. -->
<table border="1">
     <tbody id="list" role="list">
         <tr id="item1" role="listitem"><td>1a</td><td>1b</td></tr>
         <tr id="item2" role="listitem"><td>2a</td><td>2b</td></tr>
     </tbody>
</table>

<!-- ARIA roles inside table cells shouldn't count. -->
<table id="table" border="1">
     <tbody id="tbody">
         <tr id="row1">
           <td>
             <div role="button">Button inside table</div>
           </td>
         </tr>
         <tr id="row2">
           <td>
             <div role="button">Button inside table</div>
           </td>
         </tr>
     </tbody>
</table>

<p id="description"></p>
<div id="console"></div>

<script>
    description("This makes sure that a table with ARIA roles on the tbody or rows is not treated as a data table.");

    if (window.accessibilityController) {
        var list = accessibilityController.accessibleElementById('list');
        shouldBe("list.role", "'AXRole: AXList'");
        var item1 = accessibilityController.accessibleElementById('item1');
        shouldBe("item1.role", "'AXRole: AXListItem'");
        var item2 = accessibilityController.accessibleElementById('item2');
        shouldBe("item2.role", "'AXRole: AXListItem'");

        var table = accessibilityController.accessibleElementById('table');
        shouldBe("table.role", "'AXRole: AXTable'");
        var row1 = accessibilityController.accessibleElementById('row1');
        shouldBe("row1.role", "'AXRole: AXRow'");
        var row2 = accessibilityController.accessibleElementById('row2');
        shouldBe("row2.role", "'AXRole: AXRow'");
    }
</script>

</body>
</html>
